<template>
  <!-- 跳转到顶部 -->
  <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp">
    <div title="返回顶部" class="scrollToTop iconfont" v-show="this.sliderFixed" @click="handleScrollTop">&#xe6e9;</div>
  </transition>
</template>

<script>
export default {
  name: 'scrollTotop',
  data () {
    return {
      sliderFixed: false
    }
  },
  methods: {
    handleScroll () {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 卷去的高度
      if (scrollTop >= 250) {
        this.sliderFixed = true
      } else {
        this.sliderFixed = false
      }
    },
    handleScrollTop () {
      console.log('跳转至顶部')
      document.documentElement.scrollTop = document.body.scrollTop = 0
    }
  },
  created () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/varibles'
.scrollToTop
  position fixed
  width .8rem
  height .8rem
  border-radius 50%
  right 1rem
  bottom 1rem
  border .04rem solid $theme-color
  color $theme-color
  text-align center
  line-height .8rem
  cursor pointer
  transition all .2s
  z-index 10
  &:hover
    background $theme-color
    color $theme-background
</style>
